<!-- “我的”页面 -->
<template>
	<view>
		
		<view style="position: relative;" class="back-color">
			<!-- 背景图片 -->
			<!-- <view class="top-backgroup" style="height: 382rpx; overflow: hidden;"> -->
				<!-- <image src='https://img.zcool.cn/community/0131815d692c7ca801211f9ec1396a.jpg@1280w_1l_2o_100sh.jpg' mode='widthFix' class='backgroud-image'></image> -->
			<!-- </view> -->
			<!-- 头像 -->
			<!-- 用于调整头像的位置 -->
			<view style="position: absolute; top: 200rpx; left: 40rpx;">
				<view class="logo-pic" >
				  <view class="logo-image" style="display: inline-block; vertical-align: middle;">
				    <view class="tn-shadow-blur" style="border-radius: 50%; background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg');width: 130rpx;height: 130rpx;background-size: cover;">
				    </view>
				  </view>
				  
				  <view class="tn-padding-right tn-color-white" style="display: inline-block; vertical-align: middle;">
				    <view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
				      边城仔
				    </view>
				    <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">欢迎访问图鸟UI</view>
				  </view>
				</view>
			</view>
		</view>

		<!-- 波浪 -->
		<view class="tnwave waveAnimation" style="height: 100rpx;">
		  <view class="waveWrapperInner bgTop">
		    <view class="wave waveTop" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
		  </view>
		  <view class="waveWrapperInner bgMiddle">
		    <view class="wave waveMiddle" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')"></view>
		  </view>
		  <view class="waveWrapperInner bgBottom">
		    <view class="wave waveBottom" style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-1.png')"></view>
		  </view>
		</view>
		
		<!-- 内容区 -->
		<demo-title>
		  <tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#c5c5c5" indicatorActiveColor="#676767" :indicator="false">
		    <view class="tn-flex tn-margin-sm">
		      <block v-for="(item, index) in 6" :key="index">
		        <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
		          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
		            <view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$tn.color.getRandomCoolBgClass(index)]">
		              <view class="tn-icon-gloves-fill"></view>
		            </view>  
		            <view class="tn-color-black tn-text-lg tn-text-center">
		              <text class="tn-text-ellipsis" style="font-size: small; color: #676767;">我的领养</text>
		            </view>
		          </view>
		        </view>
		      </block>
		    </view>
		  </tn-scroll-list>
		</demo-title>
		
		<!-- 列表区 -->
		<view class="tn-margin-top-sm">
		  <tn-list-cell>
		    <view class="list-icon-text">
		      <view class="list__left">
		        <view class="list__left__icon tn-icon-my-add tn-color-orangeyellow"></view>
		        <view class="list__left__text">对接注册</view>
		      </view>
		      <view class="list__right">
		        <!-- <view class="tn-text-sm tn-color-gray">定一个小目标吧</view> -->
		      </view>
		    </view>
		  </tn-list-cell>
		  <tn-list-cell>
		    <view class="list-icon-text">
		      <view class="list__left">
		        <view class="list__left__icon tn-icon-plane tn-color-cyan"></view>
		        <view class="list__left__text">我的对接</view>
		      </view>
		      <view class="list__right">
		        <!-- <view class="tn-text-sm tn-color-gray">定一个小目标吧</view> -->
		      </view>
		    </view>
		  </tn-list-cell>
		</view>
		
		<view class="tn-margin-top-sm">
		  <tn-list-cell>
		    <view class="list-icon-text">
		      <view class="list__left">
		        <view class="list__left__icon tn-icon-discover tn-color-bluepurple"></view>
		        <view class="list__left__text">帮助指南</view>
		      </view>
		      <view class="list__right">
		        <!-- <view class="tn-text-sm tn-color-gray">定一个小目标吧</view> -->
		      </view>
		    </view>
		  </tn-list-cell>
		  <tn-list-cell>
		    <view class="list-icon-text">
		      <view class="list__left">
		        <view class="list__left__icon tn-icon-tip tn-color-orange"></view>
		        <view class="list__left__text">关于我们</view>
		      </view>
		      <view class="list__right">
		        <!-- <view class="tn-text-sm tn-color-gray">定一个小目标吧</view> -->
		      </view>
		    </view>
		  </tn-list-cell>
		  <tn-list-cell>
		    <view class="list-icon-text">
		      <view class="list__left">
		        <view class="list__left__icon tn-icon-time tn-color-blue"></view>
		        <view class="list__left__text">更新日志</view>
		      </view>
		      <view class="list__right">
		        <!-- <view class="tn-text-sm tn-color-gray">定一个小目标吧</view> -->
		      </view>
		    </view>
		  </tn-list-cell>
		  <tn-list-cell>
		    <view class="list-icon-text">
		      <view class="list__left">
		        <view class="list__left__icon tn-icon-order tn-color-indigo"></view>
		        <view class="list__left__text">意见反馈</view>
		      </view>
		      <view class="list__right">
		        <!-- <view class="tn-text-sm tn-color-gray">定一个小目标吧</view> -->
		      </view>
		    </view>
		  </tn-list-cell>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// list: [
				// 	  'TuniaoUI现已发布V1.0.0',
				// 	  '今天天气晴朗，适合处理bug',
				// 	  'TuniaoUIV2.0.0即将发布',
				// 	  '今天想提前下班，领导不允许："你提前走人就算你是旷工了啊！"'
				// ]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.back-color {
	    overflow: hidden;
	    position: relative;
	    height: 30vh;
	    background: 
	        linear-gradient(to bottom, transparent, rgb(238, 232, 232)),
	        linear-gradient(90deg, rgba(248, 106, 172, 0.562) 20px, rgb(194, 252, 194));
	}
	
	// .gif-wave {
	//   	position: absolute;
	//   	width: 100%;
	//   	bottom: 0;
	//   	left: 0;
	//   	z-index: 99;
	//   	mix-blend-mode: screen;
	//   	height: 100rpx;
	// }
	
  /* 顶部背景图 start */
   .top-backgroup {
		height: 450rpx;
		z-index: -1;
	  
		.backgroud-image {
		  width: 100%;
		  height: 450rpx;
		  // z-index: -1;
		}
	}
	/* 顶部背景图 end */
	
	/* 波浪*/
	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}
		50% {
			transform: translateX(-25%) translateZ(0) scaleY(1)
		  }
		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1)
		}
	}
	.tnwave {
		overflow: hidden;
		position: absolute;
		z-index: 9999;
		height: 200rpx;
		left: 0;
		right: 0;
		top: 370rpx; // 用于调整波浪的位置
		bottom: auto;
	}
	.waveWrapperInner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}
	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 100%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}
	  
	.bgTop {
		  opacity: 0.4;
	}
	.waveTop {
		background-size: 50% 45px;
	}
	.waveAnimation .waveTop {
		animation: move_wave 4s linear infinite;
	}
	  
	.bgMiddle {
		 opacity: 0.6;
	}
	.waveMiddle {
		background-size: 50% 40px;
	}
	.waveAnimation .waveMiddle {
		animation: move_wave 3.5s linear infinite;
	}
	  
	.bgBottom {
		opacity: 0.95;
	}
	.waveBottom {
		background-size: 50% 35px;
	}
	.waveAnimation .waveBottom {
		animation: move_wave 2s linear infinite;
	}
	/* 波浪*/







 // 中间内容区
 .components-scroll-list {
    min-height: 100vh;
  }

  .icon3 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      margin-top: 0;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 80rpx;
        height: 80rpx;
        font-size: 40rpx;
        border-radius: 25%;
        margin-bottom: 8rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
        }
      }
    }
  }








// 列表区
.components-list {
    background-color: $tn-bg-gray-color;
    min-height: 100vh;
  }
  
  .custom-title {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10rpx 20rpx;
  }
  
  .list__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .list {
    &__left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      
      &__icon, &__image {
        margin-right: 18rpx;
      }
    }
    
    &__right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  
  .list-icon-text, .list-image-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .list-image-text {
    .list {
      &__left {
        &__image {
          width: 20rpx;
          height: 20rpx;
        }
      }
    }
  }
  
  .message {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    
    &__left {
      width: 10%;
    }
    &__middle {
      width: 80%;
      padding-left: 20rpx;
      padding-right: 40rpx;
    }
    &__right {
      width: 10%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    &__name {
      font-size: 32rpx;
      margin-bottom: 8rpx;
    }
    &__content {
      font-size: 26rpx;
      color: #838383;
    }
    &__tips {
      &__icon {
        font-size: 36rpx;
        color: #AAAAAA;
      }
    }
  }
</style>
